import React, { useMemo } from "react";
import { useBrandsAdminProducts } from "@/business.InterfaceLayer/hooks/store/useAdminQueryStore/subtables/useBrandsQueryStore";
import AdminLayout from "@/user.InterfaceLayer/Libraries/Layouts/Admin.layout";
import SubtablesWidget from "@/user.InterfaceLayer/Libraries/Widgets/Subtables.widget";
import { useTranslation } from "react-i18next";
import { useCategoriesAdminProducts } from "@/business.InterfaceLayer/hooks/store/useAdminQueryStore/subtables/useCategoriesQueryStore";
import { useRefinementsAdminProducts } from "@/business.InterfaceLayer/hooks/store/useAdminQueryStore/subtables/useRefinementsQueryStore";

const SubtablesPage: React.FC = () => {
  const { t } = useTranslation();
  const { brandsAdminProducts, isLoading: isLoadingBrands } =
    useBrandsAdminProducts();
  const { categoriesAdminProducts, isLoading: isLoadingCategories } =
    useCategoriesAdminProducts();
  const { refinementsAdminProducts, isLoading: isLoadingRefinements } =
    useRefinementsAdminProducts();

  const headBrands = useMemo(() => {
    return t?.("AdminPage.subtablesPage.brands.headTable", {
      returnObjects: true,
    }) as [];
  }, [t]);

  const headCategories = useMemo(() => {
    return t?.("AdminPage.subtablesPage.categories.headTable", {
      returnObjects: true,
    }) as [];
  }, [t]);

  const headRefinements = useMemo(() => {
    return t?.("AdminPage.subtablesPage.refinements.headTable", {
      returnObjects: true,
    }) as [];
  }, [t]);

  return (
    <AdminLayout
      title={t("AdminPage.title.subtables")}
      // error={error}
      block={
        <>
          <SubtablesWidget
            isLoading={isLoadingBrands}
            subtablesTitle={t("AdminPage.subtablesPage.brands.title")}
            columns={[{ key: "brand_id", name: "brand_name" }]}
            headItems={headBrands}
            items={brandsAdminProducts}
          />
          <SubtablesWidget
            isLoading={isLoadingCategories}
            subtablesTitle={t("AdminPage.subtablesPage.categories.title")}
            columns={[
              {
                key: "category_id",
                name: "category_name",
                role: "category_role",
              },
            ]}
            headItems={headCategories}
            items={categoriesAdminProducts}
          />
          <SubtablesWidget
            isLoading={isLoadingRefinements}
            subtablesTitle={t("AdminPage.subtablesPage.refinements.title")}
            columns={[{ key: "refinements_id", name: "refinements_name" }]}
            headItems={headRefinements}
            items={refinementsAdminProducts}
          />
        </>
      }
    />
  );
};
export default SubtablesPage;
